<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 
        组件的使用：
            1.定义组件
            2.注册组件
                全局注册
                局部注册
            3.使用组件（页面中必须有一个vm），写标签
     -->
    <div id="root">
        <App/>
    </div>
    <script>
        /* 
            定义一个School组件(数据和代码的集合)：（组件和vm不一样）
                1.如何定义一个组件？---使用Vue.extend()去创建
                2.School是一个构造函数，我们以后写</School>,Vue帮我们new School
                3.Vue.extend(options)中的options是一个配置对象，这个配置对象和new Vue时几乎一致，区别如下：
                    （1）不能写el去指定容器？
                        所有组件最终要被一个vm所管理，vm中会制定好容器el，即组件会放入哪一个
                    （2）为了确保多个组件中的数据互不干扰
                    （3）组件的模板结构，要配置在template属性中，
                        （3.1）值为html字符串，模板字符串（反引号）
                        （3.2）模板结构：只能有一个标签
                4.所有的组件定义后，必须注册才能使用，分未全局注册和局部注册
                5.特别注意
                    （1）School时构造函数但不是我们亲手写的School，是Vue.extend()生成的
                    （2）Vue.extend调用的返回值是VueComponent构造函数，所以new School其实就是在new VueComponent
                    （3）所谓组件实例就是VueComponent的实例简称vc
                        所有Vue的实例，就是Vue创建的实例，简称vm
                    （4）组件中method中的this时vc
                6.最最重要的：VueComponent继承了Vue

        */

        /* 
            非单文件组件缺点：
                模板没有提示；不能写css；
        */

        //定义一个School组件
        const School = Vue.extend({
            data(){
                return {
                    name:'iwat',
                    address:'下河疃'
                }
            },
            template:
                `<div>
                    <h2>学校的名字：{{name}}</h2>
                    <h2>学校的地址：{{address}}</h2>
                </div>` 
        });

        //定义一个App组件，去管理其他组件，vm只保有这条一个组件就可以了
        const App = Vue.extend({
            components:{School},
            template:
                `
                <div>
                    <School></School>
                </div>
                `
        });
        /* 
            注册组件：
                1.全局注册： Vue.component('School',School);
                2.局部注册：
        */
        //Vue.component('School',School);

        //定义一个vm，去管理所有组件
        new Vue({
            el:'#root',
            components:{
                App
            }
        });
    </script>
</body>
</html>